<html>
<head>
    <title>Add a Map using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
</head>
<body>
<gmp-map
        center="37.4220656,-122.0840897"
        zoom="10"
        map-id="1516c40ffd53db85"
        style="height: 400px"
></gmp-map>

<!--
  The `defer` attribute causes the callback to execute after the full HTML
  document has been parsed. For non-blocking uses, avoiding race conditions,
  and consistent behavior across browsers, consider loading using Promises.
  See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
  for more information.
  -->
<script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAuqabi0_BH31N1Ux59aG3TpDJWZOgEdPg&callback=initMap&v=beta"
        defer
></script>
</body>
</html>